<!DOCTYPE html>
<html lang="zh" class="dark">
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no" /> 
  <meta name="description" content="" />

  <title>资源广场</title> 
  <link href="css/app.css" rel="stylesheet" /> 
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="/css/compnent.css" />
  <link rel="stylesheet" type="text/css" href="/css/header.css" />
 </head> 
 <body> 
  <div outline="0" hidefocus="true" id="app">
   <#include "/common/header.html">
   <div> 
    <div class="square-header-container"> 
     <div class="square-header-logo-container">
      Logo
     </div> 
    </div> 
    <div class="square-title">
     Mou小可爱的广场
    </div> 
    <div class="square-desc">
     即刻获取常用设计资源，设计快人一步
    </div>
    <input type="hidden" id="categoryId"  value="${categoryId}">
    <input type="hidden" id="categoryTitle"  value="${categoryTitle}">
    <div class="square-operation"> 
     <div  class="square-operation-container"> 
      <div  class="square-operation-select"> 
       <div data-v-566ba0f2="" data-v-53b4124c=""  class="basic-popover master-select theme_simple" slot="header" style="width: 120px;"> 
        <div data-v-566ba0f2="" tabindex="0" class="trigger" style="display: inline-block;"> 
         <div data-v-566ba0f2="" class=""> 
          <div data-v-566ba0f2="" class="simple-drop"> 
           <div data-v-566ba0f2="" class="simple-title simple-title-small">
             最新发布 
           </div> 
           <div data-v-566ba0f2="" class="dropdown_icon transition"> 
            <svg width="1em" height="1em" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-566ba0f2="" style="font-size: 14px; transform: rotate(0deg);"> 
             <path fill-rule="evenodd" clip-rule="evenodd" d="M7.00015 8.38203L4.38089 5.71749C4.26341 5.59799 4.07082 5.59789 3.95322 5.71727L3.70719 5.96704C3.59223 6.08375 3.59215 6.2711 3.70701 6.38791L6.6027 9.33269C6.8222 9.55577 7.1781 9.55577 7.3976 9.33269L10.293 6.38799C10.4079 6.27118 10.4078 6.08383 10.2928 5.96713L10.0468 5.71738C9.92919 5.598 9.73659 5.5981 9.61912 5.71761L7.00015 8.38203Z" fill="currentcolor"></path> 
            </svg> 
           </div> 
          </div> 
         </div> 
        </div> 
        <!----> 
       </div> 
      </div> 
      <div class="square-operation-detail">

       <div :class="[cindex== -1 ? 'active':'']"
            @click="searchByCategoryId(0,-1)"
             class="p4 square-operation-item ">
         全部 
       </div>
      <!-- <#list  blogCategoryList as blog>
          <div  class="p4 square-operation-item ">
             ${blog.categoryTitle}
          </div>
       </#list>-->
       <div  @click="searchByCategoryId(blog.id,index)"
             v-for="(blog,index) in blogCategories"
             :class="[index==cindex? 'active' : '']"
             class="p4 square-operation-item  ">
        {{blog.categoryTitle}}
       </div>


      </div> 
     </div> 
     <!----> 
     <div  id="square-item-container" class="square-item-container"> 
      <div v-for="(blogs,index) in blogList"  class="square-item-detail resource-item-hover">

       <div  class="square-item-wrapper" :style="'background: url('+blogs.img+') 0% 0% / 100% 100%;'"></div>
       <div  class="square-item-desc p5">
        <a :href="'/blogDetail/'+blogs.id" :title="blogs.title" target="_self">
        <span  class="square-item-name truncate"> {{blogs.title}} </span>
        <span  class="square-item-count">
         <svg  width="1em" height="1em" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-size: inherit; transform: rotate(0deg);">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.11011 6.00338L9.36465 6.25659C9.48212 6.37344 9.48212 6.56288 9.36465 6.67973L7.42392 8.61025C7.18898 8.84394 6.80808 8.84394 6.57315 8.61025L4.63239 6.6797C4.51492 6.56286 4.51492 6.37341 4.63239 6.25656L4.88699 6.0033C5.00446 5.88645 5.19491 5.88645 5.31237 6.0033L6.51772 7.2023L6.51728 2.30172C6.51726 2.13647 6.65191 2.0025 6.81803 2.00248L7.17806 2.00244C7.34418 2.00242 7.47887 2.13637 7.47888 2.30162L7.47933 7.20242L8.68472 6.00338C8.80219 5.88654 8.99264 5.88654 9.11011 6.00338ZM10.9983 10.9973H3.00195V8.29989C3.00195 8.13421 2.86764 7.99989 2.70195 7.99989H2.30195C2.13627 7.99989 2.00195 8.13421 2.00195 8.29989V11.3973C2.00195 11.7287 2.27058 11.9973 2.60195 11.9973H11.3983C11.7297 11.9973 11.9983 11.7287 11.9983 11.3973V8.29989C11.9983 8.13421 11.864 7.99989 11.6983 7.99989H11.2983C11.1326 7.99989 10.9983 8.13421 10.9983 8.29989V10.9973Z" fill="currentcolor"></path>
         </svg><span > 1215 </span></span>
        </a>
       </div>

      </div> 

     </div> 
    </div>

    <!--loading提示-->
    <div id="loading" v-show="loading==1"></div>
   <!--加载更多当没有数据时提示-->
   <div class="square-loading">
    <div v-if="fullload">
     - 我是有底线的 -
    </div>
   </div>

   <!--加载更多-->
   <div v-if="total>0">
   <div style="text-align: center">
   <button style="color: white"  @click="loadMore">加载更多</button>
   </div>
   <!--分页-->
    <div style="text-align: center">
     总共:{{total}}条数据,当前页{{pageNum}}  <button style="color: white" @click="prevPage">上一页</button >|<button style="color: white" @click="nextPage">下一页</button>    总页数{{pages}}
    </div>
   </div>
   <div v-else="total=0" style="text-align: center;font-size: 48px;color: #ca4021">
      数据还在创建中................
   </div>

    <div class="square-loading"> 
     <!----> 
     <!----> 
     <div>
      - 到底部了 -
     </div> 
    </div> 
   </div> 
  </div>
  <script src="/js/vue.min.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="/js/vue-router.min.js"></script>
  <script src="/js/common/common.js"></script>
  <script>ksdLoading("loading")</script>
 <script>
    var vue=new Vue({
     el: "#app",
     data: {
      blogCategories:[],
      blogList:[],
      cindex:-1,
      pageNum:1,
      pageSzie:8,
      total:0,
      pages:0,
      fullload:false,
      categoryId:0,
      categoryTitle:'',
      loading:0,
      //头像是否展开
      expandLogin:false
     },
  created : function () {
      this.categoryId = document.getElementById("categoryId").value;
      this.categoryTitle= document.getElementById("categoryTitle").value;
      this.findCategory();
      this.loadBlogList();

     },
     methods:{
      //返回到列表时获取分类索引
      findIndex(){
        this.blogCategories.forEach((item,index)=>{
         //根据title和数组中的title进行匹配获取索引
         if (item.categoryTitle==this.categoryTitle){
          //获取索引,添加样式
          this.cindex=index;
          console.log(this.cindex);
         }
       })
      },
      nextPage:function (){
        if (this.pageNum==this.pages){
           alert("没有数据了")
            return;
        }
        this.pageNum++;
        this.loadBlogList();
      },
      prevPage:function(){
       this.pageNum--;
       if (this.pageNum<1){
        alert("没有数据了")
        return;
       }
       this.loadBlogList();
      },
      //加载更多
      loadMore:function(){
       if (this.pageNum==this.pages){
         return
       }
       this.fullload=this.pageNum==this.pages-1;
       this.pageNum++;
       this.loading=1;
       this.scrollLoading();
      },
        //查询博客列表
      loadBlogList:function(){
        axios.get("/api/blogList?pageNum="+this.pageNum+"&pageSize="+this.pageSzie+"&categoryId="+this.categoryId).then(res=>{

         this.blogList=res.data.records
         this.pages=res.data.pages
         this.total=res.data.total
         this.pageNum=res.data.current
         this.pageSzie=res.data.size
         this.loading=0
        })
      },
      //滚动加载博客列表
      scrollLoading:function () {

       axios.get("/api/blogList?pageNum="+this.pageNum+"&pageSize="+this.pageSzie+"&categoryId="+this.categoryId).then(res=>{
           this.blogList=this.blogList.concat(res.data.records);
           this.total=res.data.total;
           this.pageNum=res.data.current;
           this.pages=res.data.pages;
           this.loading=0;
       })

      },
      //查询分类
      findCategory:function () {
       axios.get("/api/category").then(res=>{
          this.blogCategories=res.data;
          this.findIndex();
       })
      },


      //根据分类查询博客列表
      searchByCategoryId(cid,index){
          this.categoryId=cid;
          //选中样式控制
          this.cindex=index;
          this.blogList=[];
          this.pageNum=1;
          this.loading=1;
          this.loadBlogList();
      },
      //点击头像展开列表
      spread(){
       this.expandLogin=!this.expandLogin;
      }
     }
    })
 </script>
 </body>
</html>